<template>
	<fu-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true" :border-radius="24">
		<view class="padding xs_bj">
			<view class="flex justify-between padding-bottom">
				<view class="flex-sub text-center xs_title">
					<text class="xs_circle opacity50"></text>
					<text class="xs_circle"></text>
					<text class="xs_text">{{i18n['优惠']}}</text>
					<text class="xs_circle"></text>
					<text class="xs_circle opacity50"></text>
				</view>
				<view class="close-box" @tap="close"><text class="cuIcon-close"></text></view>
			</view>
			<scroll-view class="container" scroll-y>
				<block v-for="(item, index) in info" :key="index">
					<label>
						<view class="flex  margin-tb-sm height-150 wrap" :class="{'xs_bl':item.is_receive !== 1}">
							<view class="flex-sub bg-white border radius list-item flex align-cente xs_b">
								<view class="radius flex xs_center" :class="item.is_receive === 1 ? 'is_receive' : 'xs_back'">
									<view class="text-price xs_price">{{ item.money }}</view>
									<view class="xs_full">{{i18n['满']}}{{ item.min_order_money }}{{i18n['可减']}}</view>
								</view>
								<view class="right flex-sub flex">
									<view class="flex-sub padding-left-sm flex flex-direction justify-around">
										<text class="text-sm text-333 text-cut xs_text">{{ item.name }}</text>
										<text class="text-sm" v-if="item.type == 1">{{i18n['使用限制']}}：{{i18n['无限制']}}</text>
										<!-- <text class="text-cut text-333 text-sm" v-else>使用限制：满{{ item.min_order_money }}元使用</text> -->
										<text class="text-cut text-sm text-999 margin-top-xs xs_time">{{i18n['有效期至']}}：{{ item.end_time }}</text>
									</view>
								</view>
								<view class="card-action">
									<text class="action-btn xs_btn" :class="item.is_receive === 1 ? 'get-after' : 'get-before'" @tap.stop="receive(item, index, item.is_receive)">
										{{ item.is_receive === 1 ? i18n['已领取'] : i18n['立即领取'] }}
									</text>
								</view>
							</view>
						</view>
					</label>
				</block>
			</scroll-view>
		</view>
	</fu-popup>
</template>

<script>
export default {
	props: {
		info: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			show: false,
			curTab: 0,
			isLoading: false, // 防连点
		};
	},
	watch: {},
	methods: {
		//领取优惠券
		receive(item, index, is_receive) {
			// 前端判断已领取得点击失效
			if (is_receive == 1) {
				return false;
			}
			if (this.isLoading) return;
			this.isLoading = true;
			this.$api
				.post(global.apiUrls.postReceiveCoupon, {
					cid: item.id
				})
				.then(res => {
					this.$message.info(res.data.msg)
					if (res.data.code == 1) {
						this.$emit('changeInfo', index);
					}
					this.isLoading = false;
				}).catch(err => {
					this.isLoading = false;
				});
		},
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.xs_bj {
	background: #f7f7f7;
	word-break: break-all;
}
.xs_center {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 150upx;
	// height: 170upx;
}
.xs_price {
	font-size: 32upx;
	font-weight: bold;
	color: #ffffff;
}
.text-price::before {
	font-size: 12px;
}
.xs_full {
	font-size: 24upx;
	color: #ffffff;
}
.xs_text {
}
.xs_time {
}
.xs_btn {
	background: $theme !important;
	border-radius: 30px !important;
}
.xs_bl {
	border-left: 1px dotted $theme !important;
}
.xs_b {
	background: #fff !important;
	border: none !important;
}
.xs_back {
	background: $theme !important;
	border-radius: 2px !important;
}
.is_receive {
	background: #ececec !important;
	border-radius: 2px !important;
	.xs_price,.xs_full {
		color: #999;
	}
}
.container {
	height: 600rpx;
}
.text-999 {
	color: #999999;
}
.height-150 {
	height: 150rpx;
}
.text-price {
	/* color: red; */
	line-height: 1;
	text-align: center;
}
.card-action {
	justify-content: center;
	width: 180rpx;
	display: flex;
	align-items: center;
	/* flex: 1; */
	height: 100%;
	padding-left: 10rpx;
	padding-right: 10rpx;
	.action-btn {
		height: 60rpx;
		width: 140rpx;
		padding: 0;
		border-radius: 20rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 60rpx;
		color: #ffffff;
		background: $theme;
	}
}
.get-after {
	background: #949090 !important;
}
.get-before {
	background: linear-gradient(90deg, rgb(245, 69, 45) 0%, rgb(255, 3, 3) 100%);
}
.left {
	text-align: center;
	width: 140rpx;
	/* background: #FCCE31; */
	background: linear-gradient(90deg, #ff154f 0%, #f12228 100%);
	color: #fff;
	height: 100%;
	line-height: 1;
}
.right {
	width: 360rpx;
}
.border {
	border: 1rpx solid #fbefc7;
	background: #fbefc7;
}
.xs_title {
	font-size: 36upx;
	font-weight: bold;
	color: #333333;
	display: flex;
	align-items: center;
	justify-content: center;
	.xs_text {
		padding: 0 18upx;
	}
	.xs_circle {
		width: 10upx;
		height: 10upx;
		background: #fa2033;
		border-radius: 50%;
		margin: 0 6upx;
	}
	.opacity50 {
		opacity: 0.5;
	}
}

</style>
